<template>
	<view class="page-view" :style="skin">
		<zx-nav title="常购单" bg="#fff" fixedTop></zx-nav>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<!-- 数据列表 -->
			<view class="list">
				<view class="item flex align-center justify-between" v-for="(item, index) in orderlist" :key="index">
					<view>
						<view class="name">{{ item.name }}</view>
						<text class="text-gray">共{{ item.count_ }}种花材{{ item.qty_ }}扎</text>
					</view>
					<view class="flex align-center">
						<view class="addbtn" @tap="add(item.id)">立即采购</view>
						<view class="delbtn" @tap="delTmp(item.id)">
							<image src="/static/icon17.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import tuiSwipeAction from '@/components/tui-swipe-action/tui-swipe-action.vue';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			orderlist: []
		};
	},
	components: { tuiSwipeAction },
	methods: {
		upCallback(mescroll) {
			this.getorderlist();
		},
		downCallback() {
			this.mescroll && this.mescroll.resetUpScroll();
		},
		getorderlist() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize
			};
			let $me = this;
			this.$postAction(this.$api.getquickTemplate, { ...param, noloading: true }).then(da => {
				if (da.data && da.data.length > 0) {
					let curPageData = da.data;
					this.mescroll.endBySize(curPageData.length, da.count);
					if (this.mescroll.num == 1) this.orderlist = []; //如果是第一页需手动制空列表
					this.orderlist = this.orderlist.concat(curPageData); //追加新数据
				} else {
					this.orderlist = [];
					this.mescroll.endSuccess(0, false);
				}
			});
		},
		delTmp(id) {
			this.$postAction(this.$api.delTmp + id).then(da => {
				this.downCallback();
			});
		},
		add(id) {
			this.$postAction(this.$api.importTmp + id).then(da => {
				let pages = getCurrentPages();
				let prePage = pages[pages.length - 2];
				prePage.$vm.product = {};
				uni.navigateBack({
					delta: 1
				});
			});
		}
	}
};
</script>

<style scoped lang="scss">
.page-view {
	background: #f4f4f4;
	height: 100vh;
	overflow: auto;
}
.list {
	color: #848484;
	line-height: 1.2;
	margin: 20upx;
	.item {
		padding: 20upx;
		font-size: 28upx;
		margin-bottom: 10upx;
		background: #fff;
		border-radius: 8upx;
	}
	.name {
		color: #333;
		font-size: 32upx;
		margin-bottom: 10upx;
	}
	.addbtn {
		background: var(--nav-bg);
		text-align: center;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		color: #fff;
		margin-right: 20upx;
		font-size: 24upx;
	}
	.delbtn {
		height: 100%;
		image {
			display: block;
			width: 30upx;
			height: 30upx;
		}
	}
}
</style>
